<!-- 播放页 -->
<template>
  <div class="play bg-fff">
    <!-- 顶部 -->
    <div
      class="display-flex flex-between play-top w-100 bg-fff align-items-center"
    >
      <div>
        <img
          class="icon-size-24 margin-right-8 vertical-align-middle"
          src="@/assets/images/ic_back.png"
        />
        <span
          class="margin-right-24 color-18191A font-size-14 vertical-align-middle"
          >返回</span
        >
        <span
          class="margin-right-12 color-18191A font-size-18 font-weight-500 vertical-align-middle"
          >法学方法论</span
        >
        <span
          class="play-status font-size-12 color-fff text-center vertical-align-middle"
          >录播</span
        >
      </div>
      <div>
        <img
          class="icon-size-16 margin-right-8 vertical-align-middle"
          src="@/assets/images/ic_knowledgepoint.png"
        />
        <span class="font-size-14 color-2F3133 margin-right-12">知识点:</span>
        <span
          class="font-size-14 color-0F63ED margin-right-12"
          style="margin-right: 61px"
          >生物信息学在研究水稻抗旱领域的应用</span
        >
        <img
          class="icon-size-20 margin-right-5 vertical-align-middle"
          src="@/assets/images/ic_classroomreality.png"
        />
        <span class="font-size-14 color-2F3133" style="margin-right: 32px"
          >课堂实况</span
        >
        <img
          class="icon-size-20 margin-right-5 vertical-align-middle"
          src="@/assets/images/ic_contentsummary.png"
        />
        <span class="font-size-14 color-2F3133" style="margin-right: 32px"
          >内容总结</span
        >
        <img
          class="icon-size-32 margin-right-5"
          src="@/assets/images/image.png"
        />
      </div>
    </div>
    <!-- 视频区域 -->
    <div class="video-box w-100 display-flex">
      <div class="video-left">
        <div class="video-top w-100">
          <span class="color-fff margin-right-16 font-size-16"
            >第 7 学时 水稻耐盐碱能力调控基因研究</span
          >
          <span class="videoStatus font-size-12 color-00065 margin-right-12"
            >已结束</span
          >
          <span class="studentType font-size-12">研究生</span>
        </div>
        <div class="videoBox w-100">
          <video class="w-100 h-100 bg-000" controls></video>
        </div>
      </div>
      <div class="video-right">
        <!-- 功能区域 -->
        <div class="tool-box">
          <p class="font-size-18 color-18191A">功能</p>
          <div class="tool-content">
            <div
              class="tool-item text-center"
              v-for="(item, index) in toolList"
              :key="index"
            >
              <img class="icon-size-36" :src="item.src" />
              <p class="font-size-12 margin-top-8">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
        <!-- ppt/目录 -->
        <div class="pptBox">
          <div class="ppt-top display-flex">
            <div
              class="margin-right-24 toogle-item cursor-pointer"
              :class="selectIndex == index ? 'active-item' : ''"
              v-for="(item, index) in toogleList"
              :key="index"
              @click="handleToogle(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 内容 -->
          <div v-if="selectIndex == 0" class="pptContent">
            <div class="ppt-item w-100">
              <img class="w-100 h-100" src="@/assets/images/pic.png" />
              <div class="del icon-size-30 color-fff font-size-14"></div>
              <div class="num color-fff font-size-14">1</div>
              <div class="time color-fff font-size-14">00:18</div>
            </div>
            <div class="ppt-item w-100">
              <img class="w-100 h-100" src="@/assets/images/pic.png" />
              <div class="del icon-size-30 color-fff font-size-14"></div>
              <div class="num color-fff font-size-14">1</div>
              <div class="time color-fff font-size-14">00:18</div>
            </div>
            <div class="ppt-item w-100">
              <img class="w-100 h-100" src="@/assets/images/pic.png" />
              <div class="del icon-size-30 color-fff font-size-14"></div>
              <div class="num color-fff font-size-14">1</div>
              <div class="time color-fff font-size-14">00:18</div>
            </div>
          </div>
          <div v-if="selectIndex == 1" class="courseOutline">
            <div
              class="outline-item"
              v-for="(item, index) in outLineList"
              :key="index"
            >
              <div class="display-flex flex-between outline-item-top">
                <div>
                  <img class="icon-size-24" src="@/assets/images/ic_date.png" />
                  <span class="margin-left-10">{{ item.time }}</span>
                </div>
                <div
                  class="outline-arrow icon-size-20"
                  :class="
                    selectOutlineList.includes(index)
                      ? 'arrow-up'
                      : 'arrow-down'
                  "
                  @click="handleArrow(index)"
                ></div>
              </div>
              <div v-if="selectOutlineList.includes(index)">
                <div
                  class="outline-item-list"
                  v-for="(i, index1) in item.list"
                  :key="index1"
                >
                  <div class="display-flex flex-between">
                    <div
                      class="color-18191A font-size-16 font-weight-500 course-hour"
                    >
                      第 {{ i.hours }} 学时
                    </div>
                    <img
                      class="icon-size-20"
                      src="@/assets/images/ic_blue_play.png"
                    />
                  </div>
                  <p
                    class="color-2F3133 font-size-14 courseName"
                    style="margin-top: 6px"
                  >
                    {{ i.name }}
                  </p>
                  <div
                    class="display-flex flex-between font-size-12"
                    style="margin-top: 12px"
                  >
                    <div>上课时间: 第 {{ i.classSeq }} 节</div>
                    <div>上课地点: {{ i.arrdes }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import like from '@/assets/images/ic_like.png'
import collect from '@/assets/images/ic_collect.png'
import dati from '@/assets/images/ic_dati.png'
import tkpf from '@/assets/images/ic_tingkepingfen.png'
const selectOutlineList: any = ref([])
const toolList = ref([
  {
    indx: 0,
    name: '点赞',
    src: like
  },
  {
    indx: 1,
    name: '收藏',
    src: collect
  },
  {
    indx: 2,
    name: '答题',
    src: dati
  },
  {
    indx: 3,
    name: '听课评分',
    src: tkpf
  }
])
const toogleList = ref([
  {
    index: 0,
    name: 'PPT'
  },
  {
    index: 1,
    name: '目录'
  }
])
const selectIndex = ref(1)
const outLineList = ref([
  {
    index: 0,
    time: '2024-12-03',
    list: [
      {
        index: 0,
        hours: 1,
        name: '生物信息学在病毒及疫苗研究中的应用',
        classSeq: 5,
        arrdes: '教 1 楼 406'
      },
      {
        index: 1,
        hours: 2,
        name: '生物信息学应用',
        classSeq: 5,
        arrdes: '教 1 楼 403'
      }
    ]
  },
  {
    index: 0,
    time: '2024-12-00',
    list: [
      {
        index: 0,
        hours: 1,
        name: '生物信息学在病毒及疫苗研究中的应用',
        classSeq: 5,
        arrdes: '教 1 楼 406'
      },
      {
        index: 1,
        hours: 2,
        name: '生物信息学应用',
        classSeq: 5,
        arrdes: '教 1 楼 403'
      }
    ]
  }
])
onMounted(() => {})
const handleToogle = (val: any) => {
  selectIndex.value = val
}
const handleArrow = (index: any) => {
  if (selectOutlineList.value.includes(index)) {
    // 如果当前项已展开，则收起
    selectOutlineList.value = selectOutlineList.value.filter(
      (i: any) => i !== index
    )
  } else {
    // 否则展开当前项
    selectOutlineList.value.push(index)
  }
}
</script>

<style lang="scss" scoped>
.play {
  height: 100vh;
}
.play-top {
  height: 60px;
  padding: 18px 24px;
  box-sizing: border-box;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.16);
}
.play-status {
  display: inline-block;
  width: 40px;
  height: 24px;
  line-height: 24px;
  background: linear-gradient(314deg, #ef7800 0%, #fba738 50%, #ffb765 100%);
  border-radius: 2px;
}
.video-box {
  .video-left {
    width: calc(100% - 350px);
    .video-top {
      padding: 17px 24px;
      box-sizing: border-box;
      height: 56px;
      background: rgba(0, 0, 0, 0.8);
      .videoStatus {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        padding: 0px 8px;
        box-sizing: border-box;
        background: #e8e8e8;
        border-radius: 2px;
      }
      .studentType {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        padding: 0px 8px;
        box-sizing: border-box;
        background: #ece9fc;
        color: #5f49e5;
        border-radius: 2px;
      }
    }
    .videoBox {
      height: calc(100vh - 130px);
    }
  }
  .video-right {
    width: 350px;
    .tool-box {
      padding: 16px 24px 20px;
      box-sizing: border-box;
    }
    .tool-content {
      padding: 4px 10px;
      box-sizing: border-box;
      overflow: hidden;
      .tool-item {
        width: calc((100% - 120px) / 3);
        float: left;
        margin-right: 60px;
        margin-top: 24px;
      }
      .tool-item:nth-child(3n) {
        margin-right: 0;
      }
    }
    .pptBox {
      margin-top: 20px;
      padding-top: 16px;
      box-sizing: border-box;
      border-top: 1px solid #e8e8e8;
      .ppt-top {
        padding: 16px 24px;
        box-sizing: border-box;
      }
      .toogle-item {
        line-height: 24px;
        border-bottom: 4px solid #fff;
      }
      .active-item {
        border-color: #0f63ed;
      }
    }
  }
}
// ppt
.pptContent {
  height: 55vh;
  overflow-y: auto;
  padding: 0 24px;
  box-sizing: border-box;
  .ppt-item {
    height: 164px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
    .num {
      padding: 0 8px;
      box-sizing: border-box;
      height: 24px;
      line-height: 24px;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    .time {
      padding: 0 13px;
      box-sizing: border-box;
      height: 24px;
      line-height: 24px;
      position: absolute;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    .del {
      position: absolute;
      right: 6px;
      top: 6px;
      background-image: url('@/assets/images/ic_delete_normal.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .ppt-item:hover {
    .del {
      background-image: url('@/assets/images/ic_delete_hover.png');
    }
  }
}
// 目录
.outline-item-top {
  padding: 0 24px 16px;
  box-sizing: border-box;
}

.outline-arrow {
  background-repeat: no-repeat;
  background-size: 100%;
}

.arrow-down {
  background-image: url('@/assets/images/ic_down.png');
}

.arrow-up {
  background-image: url('@/assets/images/ic_up.png');
}

.outline-item-list {
  padding: 12px 24px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6ebf0;
}

.outline-item-list:hover {
  background: #e6ebf0;
  .courseName {
    color: #0f63ed;
  }
  .course-hour {
    color: #0f63ed;
  }
}

.outline-item-list:first-child {
  border-top: 1px solid #e6ebf0;
}
</style>
